<template>
	<view class="commentPopular-page">
		<u-popup :round="30" :safeAreaInsetBottom="false" :closeOnClickOverlay="false" :closeable="true" mode="bottom"
			:show="show" @close="close">
			<view class="commentPopular-page-content">
				<view class="page-content-top">
					<span>{{title}}</span>
					<span>{{querstval.user?.nickname}}</span>
					<!-- <view class="content-top-nav">
						<img :src="querstval.user?.avatar?.url?querstval.user?.avatar?.url:queryIcon('modelone1') "
							alt="" class="top-nav-img">
						 <span>{{querstval.user?.nickname}}</span> 
					</view> -->
					<!-- <view class="content-top-text">
						 <span>{{querstval.content}}</span>
					</view> -->
					<view class="content-top-bootm">
						<span class="content-top-bootmtext" @click="focumy">评论</span>
						<span>此提问</span>
					</view>
				</view>
				<view class="page-content-body" v-if="commentList.length>0">
					<view class="content-body-list" v-for="(item,index) in commentList" :key="item.id">
						<view class="body-list-content" @click="focusinput(item.id, item.user_user,true,null, index)">
							<view class="content-nav">

								<img :src="item.replyer?.avatar?.url?item.replyer?.avatar?.url:queryIcon('modelone1') "
									alt="" class="content-nav-img">
								<span>{{item.replyer?.nickname}}</span>
							</view>
							<view class="content-text">
								<span>{{item.content}}</span>
							</view>
							<view class="content-bottom">
								<view class="content-bottom-left">
									<span>{{ $utils.dateFormat(item.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
								</view>
								<view class="content-bottom-right">
									<view class="bottom-right-left"
										@click.stop="dianzan(index, item.id, dianzanflg,item.content)">
										<img :src="(item.visits?.is_like)?queryIconImage('questiondetalogo4cative'):queryIconImage('questiondetalogo4')"
											alt=""
											style="width: 40rpx;height: 40rpx;margin-right: 5rpx;margin-bottom: 4rpx;">
										<span>{{item.like_zan_like_zan.length}}</span>
									</view>

								</view>

							</view>
							<view class="bottom-right-left2" @click.stop="commentReplyShow(index, item.id)">
								<!-- <img :src="queryIconImage('questiondetalogo5')" alt=""
									style="width: 40rpx;height: 40rpx;margin-right: 8rpx;"> -->
								<span v-if="item?.children?.length > 0" class="zhankai"
									style="font-size: 20rpx;color: #666666;">——展开{{ item?.children?.length || 0}}条回复▾</span>
							</view>
						</view>

						<view class="body-list-contentchailde"
							v-if=" item?.children?.length > 0 && commentList[index].id == clickId && flag == false">
							<view class="contentchailde-content" v-for="(v,i) in item.children" :key="v.id">

								<view @click="focusinput(v.id, v.user_user,true, item.id, index)">
									<view class="content-nav">
										<img :src="v.replyer?.avatar?.url?v.replyer?.avatar?.url:queryIcon('modelone1') "
											alt="" class="content-nav-img">
										<!-- 			<span
											v-if="v.reply">{{v.user?.nickname}}&nbsp;&nbsp;&nbsp;&nbsp;回复:&nbsp;{{m.user?.nickname}}</span> -->
										<span>{{v.replyer?.nickname}}</span>
									</view>
									<view class="content-text">
										<span>{{v.content}}</span>
									</view>
									<view class="content-bottom">
										<view class="content-bottom-left">
											<span>{{ $utils.dateFormat(v.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
										</view>
										<view class="content-bottom-right">
											<!-- 点赞2 -->
											<view class="bottom-right-left"
												@click.stop="changezantwo(index,v.id,dianzanflg2,v.content)">
												<img :src="(v.visits?.is_like)?queryIconImage('questiondetalogo4cative'):queryIconImage('questiondetalogo4')"
													alt=""
													style="width: 40rpx;height: 40rpx;margin-right: 5rpx;margin-bottom: 4rpx;">
												<span>{{v.like_zan_like_zan.length}}</span>
											</view>
										</view>
									</view>
								</view>
								<view @click="focusinput(v.id, v.user_user,true, item.id, index)"
									v-for="m in v.children">
									<view class="content-nav">
										<img :src="m.replyer?.avatar?.url?m.replyer?.avatar?.url:queryIcon('modelone1') "
											alt="" class="content-nav-img">
										<span
											v-if="m.toUser">{{m.replyer?.nickname }}&nbsp;&nbsp;&nbsp;&nbsp;回复:&nbsp;{{m.toUser?.user?.nickname}}</span>
										<span v-else>{{m.toUser?.nickname}}</span>
									</view>
									<view class="content-text">
										<span>{{m.content}}</span>
									</view>
									<view class="content-bottom">
										<view class="content-bottom-left">
											<span>{{ $utils.dateFormat(m.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
										</view>
										<view class="content-bottom-right">
											<!-- 点赞2 -->
											<view class="bottom-right-left"
												@click.stop="changezantwo(index,m.id,dianzanflg2,m.content)">
												<img :src="(m.visits?.is_like)?queryIconImage('questiondetalogo4cative'):queryIconImage('questiondetalogo4')"
													alt=""
													style="width: 40rpx;height: 40rpx;margin-right: 5rpx;margin-bottom: 4rpx;">
												<span>{{m.like_zan_like_zan.length}}</span>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="content-body-no">
						<span>— 没有更多评论了 —</span>
					</view>
				</view>

				<!-- 没有评论的界面 -->
				<view class="page-content-body-two" v-else>
					<view class="body-two-midel">
						<img mode="aspectFill" :src="queryNoDataIconImage(`commpopular`)" alt=""
							style="width: 260rpx;height: 288rpx;">
						<p>暂无评论</p>
					</view>
				</view>
				<view class="page-content-flexd">
					<view class="content-flexd-content">
						<img :src="userimg" alt="" class="top-nav-img">
						<input @blur="blurfocus" :focus="focuslean" v-model="inputval" class="uni-input"
							@confirm="getnewcomment" placeholder-style="color:#999999" :placeholder="inputpleac"
							style="font-size: 26rpx;font-family: Source Han Sans CN-Bold, Source Han Sans CN;font-weight: 700;color: #999999;line-height: 42rpx;"
							width="80%" />
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import { Filter } from '@element-plus/icons-vue/dist/types';
	import {
		mapState
	} from 'vuex';
	import {
		Time
	} from "../../utils/timenew.js";
	import methods from "./methods.js";
	export default {
		// name: "commentPopular",
		props: {
			commentshow: {
				type: Boolean
			},
			title: {
				type: String,
			},
			answerId: {
				type: Number
			},
			querstval: {
				type: Object,
				default: () => {}
			},
			articleId: {
				type: Number
			},
			userimg: {
				type: String
			}
		},
		data() {
			return {

				blean: true,
				bleanswich: false, //判断是否为回复评论
				username: '',
				clickId: 0,
				flag: false,
				currentIndex: -1,
				chaildeblean: false,
				inputpleac: '写下你的评论..',
				focuslean: false,
				inputval: '',
				dianzanflg: false,
				//子点赞
				dianzanflg2: false,
				show: false,
				chidekval: [],
				articleCommentlist: [],
				overindex: '',
				commentList: [], //评论列表
				userId: null,
				childerenlistindex: 0,
				childerenlist: [],
				article_comment: [],
				focusid: '', //回复id
				articleCommentId: null, //文章评论id
				userId: null, //向谁进行评论的id
				userName: "", //向谁进行评论的名字
				commentIndex: null, //评论的index
			};
		},
		computed: {
			...mapState({
				headericon: state => state.remote?.headericon?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
				nodataicon: state => state.remote?.nodataicon?.data_list ?? [],
			})
		},
		onLoad() {

		},
		methods: {
			...methods,
			queryIcon(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryNoDataIconImage(label, key = "nodataicon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			//获取评论列表
			getCommentInfo(articleId, answerId) {

				this.$store.dispatch("remote/query", {
					model: "ud_ordinarycomment_5349f9",
					field_string: "content user_user replyer:user{id nickname avatar{url}} toUser:ordinarycomment{user{id nickname avatar{url}}} article_article type status score created_at ud_ordinarycomment_ordinarycomment_c1969b like_zan_like_zan{id user_user ud_ordinarycomment_ordinarycomment_63d7c8}",
					limit: -1,
					order_by: {
						created_at: "desc"
					},
					where: {
						article_article: {
							_eq: articleId
						}
					}
				}).then(res => {

					this.commentList = this.groupArr(res.data_list)
					console.log("this.commentList", this.commentList);

				})
			},
			// //获取回复 文章id  评论的id
			getCommentData(articleId, id) {

				// 	this.$store.dispatch("remote/query", {
				// 		model: "ud_ordinarycomment_5349f9",
				// 		field_string: "content user_user score article_article ud_ordinarycomment_ordinarycomment_c1969b parentid",
				// 		limit: -1,
				// 		order_by: {
				// 			created_at: "desc"
				// 		},
				// 		where: {

				// 			article_article: {
				// 				_eq: articleId
				// 			}
				// 		},
				// 	}).then(res => {
				// 		// console.log("res", res.data_list);

				// 		// // let list = this.getRecursion(res.data_list,id)
				// 		// // console.log(list);
				// 		// let list = JSON.parse(JSON.stringify(res.data_list))
				// 		// for (var i = 0; i < list.length; i++) {
				// 		// 	list[i].children = []
				// 		// }

				// 		// list = list.filter(res => res.parentid == null)
				// 		// console.log(list);
				// 		// res.data_list = res.data_list.filter(res => res.parentid !== 0)
				// 		// for (var i = 0; i < list.length; i++) {
				// 		// 	for (var j = 0; j < res.data_list.length; j++) {
				// 		// 		if (list[i].id == res.data_list[j].parentid) {

				// 		// 			list[i].children.push(res.data_list[j])
				// 		// 		}
				// 		// 	}
				// 		// }
				// 		// console.log('list=', list);
				// 		console.log("this.groupArr(res.data_list)",this.groupArr(res.data_list));
				// 	})
			},
			//递归
			// groupArr(list) {
			// 	let parentIdList = {};
			// 	list.forEach((item) => {
			// 		let parentId = item.ud_ordinarycomment_ordinarycomment_c1969b;
			// 		if (!parentIdList[parentId]) {
			// 			parentIdList[parentId] = [];
			// 		}
			// 		parentIdList[parentId].push(item);

			// 	});
			// 	delete parentIdList["null"]
			// 	for (let key in parentIdList) {
			// 		for (let kkey in parentIdList) {
			// 			parentIdList[key].map(item => {

			// 				if (item.id == kkey) {
			// 					parentIdList[key].push(...parentIdList[kkey])
			// 					delete parentIdList[kkey]
			// 				}
			// 			})
			// 		}
			// 	}

			// 	//先筛选第一级的数据
			// 	let firtList = list.filter(rs => rs.ud_ordinarycomment_ordinarycomment_c1969b == null)
			// 	firtList.map(rs => {
			// 		if (!rs.children) {
			// 			rs.children = [];
			// 		}
			// 		if (parentIdList[rs.id]) {
			// 			rs.children.push(...parentIdList[rs.id])
			// 		}


			// 	})
			// 	return firtList
			// },
			groupArr(list) {
				let parentIdList = {};
				let firtList = list.filter(rs => rs.ud_ordinarycomment_ordinarycomment_c1969b == null)
				list.forEach((item) => {
					let parentId = item.ud_ordinarycomment_ordinarycomment_c1969b;
					if (!parentIdList[parentId]) {
						parentIdList[parentId] = [];
					}
					parentIdList[parentId].push(item);
				});
				delete parentIdList["null"]
				for (let key in parentIdList) {
					for (let kkey in parentIdList) {
						parentIdList[key].map(item => {
							if (item.id == kkey && firtList.filter(rs => rs.id == parentIdList[kkey]
									.ud_ordinarycomment_ordinarycomment_c1969b).length != 0) {
								parentIdList[key].push(...parentIdList[kkey])
								delete parentIdList[kkey]
							}
						})
					}
				}
				//先筛选第一级的数据
				firtList.map(rs => {
					if (!rs.children) {
						rs.children = [];
					}
					if (parentIdList[rs.id]) {
						rs.children.push(...parentIdList[rs.id])
						delete parentIdList[rs.id]
					}
				})
				firtList.map(item => {
					item.children.map(citem => {
						for (let key in parentIdList) {
							if (citem.id == key) {
								if (!citem.children) {
									citem.children = [];
								}
								citem.children.push(...parentIdList[key])
							}
						}
					})
				})
				return firtList
			},

			// getRecursion(list,id) {
			// 	console.log(list.length,id);
			// 	let returnTree = []
			// 	for(let i =0;i<list.length;i++){
			// 		let item = list[i]
			// 		if(id == item.ud_ordinarycomment_ordinarycomment_c1969b){
			// 			item.childrenList = this.getRecursion(list,item.id)
			// 			returnTree.push(item)
			// 		}
			// 	}
			// 	return returnTree
			// },


			//查看回复评论
			commentReplyShow(index, id) {
				console.log("2222", index, id, this.commentList[index]);
				if (this.clickId == 0) {
					this.clickId = id

				} else {
					this.clickId = 0

				}

			},
			//评论
			commentClick(articleCommentId, userId, bb, index) {

				this.focuslean = false
				this.articleCommentId = articleCommentId

				this.userId = userId
				console.log(this.articleCommentId, this.userId, index)
				// this.inputpleac = `@${userName}`
				// this.commentIndex = index
				// if (!this.commentList[index].article_comment) {
				// 	this.commentList[index].article_comment = []
				// }
				if (bb) {
					this.bleanswich = bb
				}

			},

			//点赞
			dianzan(index, id, like, content) {
				// let str = uni.getStorageSync('userInfo').avatar.url
				// let name = uni.getStorageSync('userInfo').nickname
				// console.log("str",str);
				console.log("22222", index, id, like, content);
				let userid = uni.getStorageSync('userInfo').id
				this.$store.dispatch('remote/query', {
					model: "like_zan",
					field_string: "content user_user ud_ordinarycomment_ordinarycomment_63d7c8 type",
					limit: -1,
					where: {
						_and: [{
							user_user: {
								_eq: userid
							}
						}, {
							ud_ordinarycomment_ordinarycomment_63d7c8: {
								_eq: id
							}
						}]
					}
				}).then(res => {
					console.log("44444", res);


					if (res.data == undefined) {
						console.log("111111");

						this.$store.dispatch('remote/mutation', {
							operation: 'insert_like_zan',
							objects: [{
								user_user: userid,
								content: content,
								ud_ordinarycomment_ordinarycomment_63d7c8: id,
								type: "点赞"
							}],


							field_string: "content user_user ud_ordinarycomment_ordinarycomment_63d7c8",
						}).then(res => {
							console.log("res");
							this.getCommentInfo(this.articleId, this.answerId)
						})

					} else {
						//点赞
						console.log("22222");
						let userid = uni.getStorageSync('userInfo').id
						this.$store.dispatch('remote/mutation', {
							operation: 'delete_like_zan',
							where: {
								_and: [{
									user_user: {
										_eq: userid
									}
								}, {
									ud_ordinarycomment_ordinarycomment_63d7c8: {
										_eq: id
									}
								}]
							},
							field_string: "content user_user ud_ordinarycomment_ordinarycomment_63d7c8",
						}).then(res => {
							console.log("res");
							this.getCommentInfo(this.articleId, this.answerId)
						})


					}
				})

			},


			//第二个点赞
			changezantwo(index, id, like, content) {
				console.log("22222", index, id, like, content);
				let userid = uni.getStorageSync('userInfo').id
				this.$store.dispatch('remote/query', {
					model: "like_zan",
					field_string: "content user_user ud_ordinarycomment_ordinarycomment_63d7c8 type",
					limit: -1,
					where: {
						_and: [{
							user_user: {
								_eq: userid
							}
						}, {
							ud_ordinarycomment_ordinarycomment_63d7c8: {
								_eq: id
							}
						}]
					}
				}).then(res => {
					console.log("44444", res);


					if (res.data == undefined) {
						console.log("111111");

						this.$store.dispatch('remote/mutation', {
							operation: 'insert_like_zan',
							objects: [{
								user_user: userid,
								content: content,
								ud_ordinarycomment_ordinarycomment_63d7c8: id,
								type: "点赞"
							}],


							field_string: "content user_user ud_ordinarycomment_ordinarycomment_63d7c8",
						}).then(res => {
							console.log("res");
							this.getCommentInfo(this.articleId, this.answerId)
						})

					} else {
						//点赞
						console.log("22222");
						let userid = uni.getStorageSync('userInfo').id
						this.$store.dispatch('remote/mutation', {
							operation: 'delete_like_zan',
							where: {
								_and: [{
									user_user: {
										_eq: userid
									}
								}, {
									ud_ordinarycomment_ordinarycomment_63d7c8: {
										_eq: id
									}

								}]
							},
							field_string: "content user_user ud_ordinarycomment_ordinarycomment_63d7c8",
						}).then(res => {
							console.log("res");
							this.getCommentInfo(this.articleId, this.answerId)
						})


					}
				})
			},

			chaildesweichlist(id, name, index) {
				if (this.childerenlistindex == index) {
					this.chaildeblean = this.chaildeblean ? false : true
				} else {
					this.childerenlistindex = index
					this.chaildeblean = true
				}
				this.childerenlist = []
				// this.granpql(id, name)
				// this.getCommentData(this.articleId,id,index)


				console.log(id, name, index)
			},


			//回复
			focusinput(childrenId, userId, bb, articleCommentId, index) {
				console.log("22222", childrenId, userId, bb, articleCommentId, index);
				// this.commentIndex = index
				this.articleCommentId = articleCommentId
				// console.log(id, userId, name, bb, articleCommentId)
				if (bb) {
					this.bleanswich = bb
				}
				this.focuslean = true
				// this.userName = name
				this.userId = userId
				this.focusid = childrenId
				// this.inputpleac = `@${name}`
			},
			//评论
			getnewcomment() {
				this.focuslean = false
				//判断是否输入评论
				// console.log("555555",this.articleId);
				if (this.inputval) {
					//判断是否是回复评论 false 为不是回复评论
					if (this.bleanswich == false) {
						this.$store.dispatch("remote/query", {
							model: "article_comment",
							field_string: "type article_article",
							limit: -1,

							where: {
								article_article: {
									_eq: this.articleId,
								}
							}
						}).then(res => {
							// console.log("res", res);
							let id = uni.getStorageSync('userInfo').id
							// let url = uni.getStorageSync('userInfo').avatar.url

							this.$store.dispatch('remote/mutation', {
								operation: 'insert_ud_ordinarycomment_5349f9',
								objects: [{
									content: this.inputval,
									user_user: id,
									score: 0,
									article_article: this.articleId,
									// type: res.data.type, //普通提问,
									status: "已通过",
								}],


								field_string: "content user_user article_article type status score id ",
							}).then(rs => {
								console.log("33333", rs);
								if (rs.returning.length > 0) {
									uni.showToast({
										icon: 'success',
										title: '发表评论成功'
									}, 1000)
									this.inputval = ''
									console.log("this.commentList", this.commentList);
									this.commentList.push(rs.returning[0])
									console.log("this.commentList", this.commentList);
									this.getCommentInfo(this.articleId, this.answerId)
								}

							})


						})

					} else {

						this.$store.dispatch("remote/query", {
							model: "article_comment",
							field_string: "type article_article",
							limit: -1,

							where: {
								article_article: {
									_eq: this.articleId,
								}
							}
						}).then(res => {
							// console.log("res", res);
							let id = uni.getStorageSync('userInfo').id
							// let url = uni.getStorageSync('userInfo').avatar.url
							console.log("nb", this.focusid);
							this.$store.dispatch('remote/mutation', {
								operation: 'insert_ud_ordinarycomment_5349f9',
								objects: [{
									content: this.inputval,
									user_user: id,
									score: 0,
									article_article: this.articleId,
									ud_ordinarycomment_ordinarycomment_c1969b: this.focusid,
									// type: res.data.type, //普通提问,
									status: "已通过",
								}],


								field_string: "content user_user article_article type status score id",
							}).then(rs => {
								console.log("33333", rs);
								if (rs.returning.length > 0) {
									uni.showToast({
										icon: 'success',
										title: '发表评论成功'
									}, 1000)
									this.inputval = ''
									console.log("this.commentList", this.commentList);
									// this.commentList.push(rs.returning[0])
									console.log("this.commentList", this.commentList);
									this.getCommentInfo(this.articleId, this.answerId)
								}

							})


						})

					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入你的评论'
					}, 1000)
				}


			},
			close() {
				this.show = false
				this.$emit('commentPoluaremit', false)
			},
		},
		watch: {
			commentshow(val) {
				this.show = val
				if (val) {
					this.getCommentInfo(this.articleId, this.answerId)
				}

			},
		}
	}
</script>

<style lang="scss">
	.commentPopular-page {
		width: 100%;
		height: 100%;

		.commentPopular-page-content {
			width: 100%;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			height: 78vh;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			// position: relative;

			.page-content-top {
				width: 100%;
				box-sizing: border-box;
				font-size: 36rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #5F5F5F;
				border-bottom: 2rpx solid #ccc;
				padding: 30rpx 28rpx;

				.content-top-nav {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: 700;
					color: #567895;
					line-height: 42rpx;

					.top-nav-img {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						overflow: hidden;
						margin-right: 12rpx;
					}
				}

				.content-top-text {
					width: 100%;
					margin-top: 12rpx;
					margin-bottom: 23rpx;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #999999;
					line-height: 50rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.content-top-bootm {
					width: 100%;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: 600;
					color: #999999;
					line-height: 42rpx;
					margin-top: 20rpx;

					.content-top-bootmtext {
						font-size: 30rpx;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: 700;
						color: #000000;
						line-height: 42rpx;
						display: inline-block;
						margin-right: 8rpx;
					}
				}
			}

			.page-content-body-two {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				padding: 0 27rpx;
				padding-bottom: 140rpx;
				overflow: hidden;
				overflow-y: auto;
				display: flex;
				justify-content: center;

				.body-two-midel {
					margin: auto;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #4A4A4A;
					line-height: 42rpx;
					text-align: center;
				}
			}

			.page-content-body {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				padding: 0 27rpx;
				padding-bottom: 140rpx;
				overflow: hidden;
				overflow-y: auto;

				.content-body-list {
					width: 100%;
					margin-top: 27rpx;

					.body-list-content {
						width: 100%;

						.bottom-right-left2 {
							padding: 7rpx 0;

						}

						.content-nav {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #666666;
							line-height: 50rpx;

							.content-nav-img {
								width: 50rpx;
								height: 50rpx;
								border-radius: 50rpx 50rpx 50rpx 50rpx;
								margin-right: 12rpx;
							}
						}

						.content-text {
							width: 100%;
							font-size: 24rpx;
							font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
							font-weight: 400;
							color: #333333;
							line-height: 40rpx;
							margin: 10rpx 0;
						}

						.content-bottom {
							width: 100%;
							box-sizing: border-box;
							padding-right: 10rpx;
							display: flex;
							justify-content: space-between;

							.content-bottom-left {
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 45rpx;
							}

							.content-bottom-right {
								width: 100rpx;
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 45rpx;

								.bottom-right-left {
									width: 60%;
									display: flex;
									align-items: center;

									.zhankai {
										width: 140%;
									}
								}
							}
						}
					}

					.body-list-contentchailde {
						width: 100%;

						.contentchailde-content {
							width: 100%;
							margin-top: 20rpx;
							background-color: #EEEEEE;
							box-sizing: border-box;
							padding: 20rpx 20rpx 24rpx 20rpx;
							border-radius: 15rpx;

							.content-nav {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #666666;
								line-height: 50rpx;

								.content-nav-img {
									width: 50rpx;
									height: 50rpx;
									border-radius: 50rpx 50rpx 50rpx 50rpx;
									margin-right: 12rpx;
								}
							}

							.content-text {
								width: 100%;
								font-size: 24rpx;
								font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
								font-weight: 400;
								color: #333333;
								line-height: 40rpx;
								margin: 10rpx 0;
							}

							.content-bottom {
								width: 100%;
								// box-sizing: border-box;
								// padding: 0 19rpx 0 20rpx;
								display: flex;
								justify-content: space-between;

								.content-bottom-left {
									font-size: 24rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 400;
									color: #999999;
									line-height: 45rpx;
								}

								.content-bottom-right {
									width: 100rpx;
									display: flex;
									align-items: center;
									font-size: 24rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 400;
									color: #999999;
									line-height: 45rpx;

									.bottom-right-left {
										// width: 20%;
										display: flex;
										align-items: center;
									}
								}
							}

						}


					}
				}

				.content-body-no {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 35rpx;
					margin-top: 25rpx;
					width: 100%;
					text-align: center;
				}
			}

			.page-content-flexd {
				width: 100%;
				box-sizing: border-box;
				padding: 0 27rpx;
				padding-bottom: 40rpx;
				position: fixed;
				bottom: 0;
				z-index: 999;
				background-color: #fff;

				.content-flexd-content {
					width: 100%;
					height: 80rpx;
					background: #EEEEEE;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					display: flex;
					align-items: center;

					.top-nav-img {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>